<!--<div><number-slider></number-slider></div>-->
<div data-flex="mean:box" class="title">
  <div data-flex-box="1" data-flex="main:left cross:center">实时资金流趋势</div>
  <div data-flex-box="0" data-flex="main:right cross:center">
    <ion-toggle class="define-toggle" [(ngModel)]="format"></ion-toggle>
  </div>
</div>

<div>
  <div data-flex="dir:top mean:box" class="wrap">
    <div data-flex="mean:box" class="list">
      <div data-flex-box="1" data-flex="main:left cross:center">
        <number-slider></number-slider>
      </div>
      <div data-flex-box="0" data-flex="main:right cross:center">
        <i class="iconfont icon-jiantou"></i>
      </div>
    </div>
    <div data-flex="main:left cross:center" class="content">资金流入</div>
  </div>

  <div data-flex="dir:top mean:box" class="wrap">
    <div data-flex="mean:box" class="list">
      <div data-flex-box="1" data-flex="main:left cross:center">
        <number-slider></number-slider>
      </div>
      <div data-flex-box="0" data-flex="main:right cross:center">
        <i class="iconfont icon-jiantou"></i>
      </div>
    </div>
    <div data-flex="main:left cross:center" class="content">货币资金余额</div>
    <div data-flex="mean:box" class="list">
      <div data-flex-box="0" data-flex="main:left cross:center" class="little-content">
        融资金额
      </div>
      <div data-flex-box="1" data-flex="main:left cross:center">
        <number-slider class="define-class"></number-slider>
      </div>
    </div>
  </div>

  <div data-flex="dir:top mean:box" class="wrap">
    <div data-flex="mean:box" class="list">
      <div data-flex-box="1" data-flex="main:left cross:center">
        <number-slider></number-slider>
      </div>
      <div data-flex-box="0" data-flex="main:right cross:center">
        <i class="iconfont icon-jiantou"></i>
      </div>
    </div>
    <div data-flex="main:left cross:center" class="content">资金支出</div>
  </div>
</div>

<div class="segment-wrap" data-flex="mean:box">
  <div data-flex-box="1" [ngClass] = "selected === 'index' ? 'active' : ''"
       (click)="segmentSelected('index')">指标监控</div>
  <div data-flex-box="1" [ngClass] = "selected === 'flow' ? 'active' : ''"
       (click)="segmentSelected('flow')">流程监控</div>
  <div data-flex-box="1" [ngClass] = "selected === 'composite' ? 'active' : ''"
       (click)="segmentSelected('composite')">综合标杆</div>
</div>

<div class="chart-wrap" [hidden]="selected != 'index'" >
  <div data-flex="main:right cross:center" class="segment-toggle">
    <ion-toggle class="define-toggle" [(ngModel)]="format"></ion-toggle>
  </div>
  <div #indexChart></div>
</div>
<div class="chart-wrap" [hidden]="selected != 'flow'">
  <div data-flex="main:right cross:center" class="segment-toggle">
    <ion-toggle class="define-toggle" [(ngModel)]="format"></ion-toggle>
  </div>
  <div #flowChart></div>
</div>
<div class="chart-wrap" [hidden]="selected != 'composite'">
  <div data-flex="main:right cross:center" class="segment-toggle">
    <ion-toggle class="define-toggle" [(ngModel)]="format"></ion-toggle>
  </div>
  <div #compositeChart></div>
</div>
